<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜品信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

<!--    表单样式-->
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>

<body>

<div class="app" id="app">

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">
                <div style=";margin-bottom: 25px;">
                    <el-input
                            placeholder="请输入菜品名"
                            clearable
                            style="width: 20%; "
                            prefix-icon="el-icon-search"
                            v-model="dishQuery.name"
                    >
                    </el-input>
                    <el-button @click="getAll()" class="dalfBut">查询</el-button>
                </div>

                <template>
                    <el-table
                            :data="dataList"
                            style="width: 100%">
                        <el-table-column type="expand" align="center">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="菜品分类：">
                                        <span>{{ props.row.flavorType }}</span>
                                    </el-form-item>
                                    <el-form-item label="菜品价格：">
                                        <span>￥{{ props.row.price }}</span>
                                    </el-form-item>
                                    <el-form-item label="是否推荐：">

                                        <template slot-scope="props">
                                            <el-tag v-if="props.row.status == 'true'" :type="'success'" disable-transitions>通过</el-tag>
                                            <el-tag v-else-if="props.row.status == 'false'" :type="'danger'" disable-transitions>未通过</el-tag>
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="菜品描述：">
                                        <span>{{ props.row.description }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="菜品 ID" prop="id" align="center"></el-table-column>

                        <el-table-column label="菜品名称" prop="name" align="center"></el-table-column>

                        <el-table-column label="推荐" prop="name" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.isRecommend"
                                        active-text="推荐"
                                        inactive-text="不推荐"
                                        @change="updateIsRecommend(scope.row)"
                                        active-value="true"
                                        inactive-value="false"
                                ></el-switch>
                            </template>
                        </el-table-column>

                        <el-table-column label="图片" prop="image" align="center">
                            <template slot-scope="{ row }">
                                <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                                     :preview-src-list=" `/photos/download?name=${row.image}` "
                                     :src="getImage(row.image)"
                                />
                                <div slot="error" class="image-slot">
                                    <img :src="imageUrl1"  style="width: auto; height: 40px; border:none;" >
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center" width="200">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="goShop(scope.row)">添加</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </template>

                <!--分页组件-->
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

        </el-container>
    </el-container>

    <!--2.新增 菜品弹框-->
    <el-dialog title="加入购物车" style="height: 750px"  :visible.sync="dishAddShow">
        <el-form :model="formData_ShoppingCart" :rules="rules" ref="formData_ShoppingCart" label-width="100px" class="demo-formData_ShoppingCart">

            <el-form-item  label="数量：" prop="number">
                <el-input-number v-model="formData_ShoppingCart.number" :min="1" :max="10" label="数量"></el-input-number>
            </el-form-item>

            <el-form-item  label="餐桌名/房间号" prop="wayDetail">
                <el-input v-model="formData_ShoppingCart.wayDetail"></el-input>
            </el-form-item>

            <el-form-item  label="添加备注：" prop="remark">
                <el-form-item prop="description">
                    <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入备注"
                            v-model="formData_ShoppingCart.remark">
                    </el-input>
                </el-form-item>
            </el-form-item>

            <el-form-item style="margin-top: 20px;">
                <el-button type="primary" @click="addOrder">确定</el-button>
                <el-button @click="center()">取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>


</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<!--<script src="../../../js/request.js"></script>-->


<script>
    new Vue({
        el: '#app',
        data:{
//1.主页面内容
            prosceniumInfo:{},
            //显示数据
            dataList:[],

            //分页插件
            pagination: {//分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //管理员搜索内容1
            dishQuery:{
                name:""
            },

            //2.弹框内容  //弹框表单
            dishAddShow: false,
            formData_ShoppingCart: {
                id:"",
                image:'',  //头像
            },

            //封装数据表单（添加到oder表）
            formPay:{},

            //弹框表单（input）校验
            rules: {
                number: [
                    { required: true, message: '请选择菜品类型', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                wayDetail: [
                    { required: true, message: '请输入餐桌名/房间号', trigger: 'blur' },
                    { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
                ]
                ,remark: [
                    { required: true, message: '请输入菜品描述', trigger: 'blur' },
                    { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
                ],
            },

            //图片
            imageUrl:'',   //弹框图片上传下载

        },
        created() {
            const prosceniumInfo = window.localStorage.getItem('prosceniumInfo')
            console.log("prosceniumInfo:::"+prosceniumInfo)
            if (prosceniumInfo) {
                this.prosceniumInfo = JSON.parse(prosceniumInfo)
            }
            console.log("prosceniumInfo:::"+prosceniumInfo)
            this.getAll();
        },

        methods: {

            getAll(){
                parent ="?name="+this.dishQuery.name;
                axios.get("/dishs/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"/1"+parent).then((res)=>{

                    this.dataList=res.data.data.records
                    this.pagination.total=res.data.data.total
                    this.dishQuery.name=""
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.getAll();
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //1. 新增/修改表单 弹框
            goShop(row){
                var dishID=row.id
                this.dishAddShow=true;
                this.formData_ShoppingCart=row
                this.formData_ShoppingCart.id=''
                this.formData_ShoppingCart.dishId=dishID
                this.formData_ShoppingCart.userId=this.prosceniumInfo.data.id


            },

            addOrder() {
                //1.添加信息到订单表
                this.$refs.formData_ShoppingCart.validate((valid)=>{
                    if (valid){
                        this.formPay.userId=this.prosceniumInfo.data.id
                        this.formPay.way="前台"
                        this.formPay.wayDetail=this.formData_ShoppingCart.wayDetail
                        this.formPay.amount =this.formData_ShoppingCart.price*this.formData_ShoppingCart.number

                        console.log( "this.formPay::")
                        console.log( this.formPay)
                        axios.post("/orders/add", this.formPay).then((res1) => {
                            console.log(res1)
                            this.$message.success(res1.data.msg)
                            if (res1.data.code) {
                                this.formData_ShoppingCart.orderId=res1.data.data
                                // 2.添加信息到订单明细表
                                axios.post("/orderDetails/addOne",this.formData_ShoppingCart ).then((res3) => {

                                })

                            }
                        }).finally(() => {
                            this.dishAddShow=false
                            this.getAll();
                        })
                }})
            },


            center(){
                this.dishAddShow=false
                this.$message.info("取消操作")
                this.getAll()

            },

            //修改推荐状态
            updateIsRecommend(row) {
                axios.put("/dishs/updateIsRecommend", row).then((res) => {

                })
            },
            //2.提交 新增/修改表单
            submitForm() {
                this.$refs.formData_ShoppingCart.validate((valid)=>{
                    if (valid){
                        console.log("提交的内容formData_ShoppingCart：")
                        console.log(this.formData_ShoppingCart)
                        if (this.title=="新增菜品"){          //1:"新增菜品" ;2:"修改菜品信息"
                            axios.post("/dishs/add",this.formData_ShoppingCart).then((res)=>{
                                if(res.data.code){
                                    console.log(res.data.code);
                                    this.$message.success(res.data.msg);
                                    console.log("提交后响应得内容：")
                                    console.log(res.data)
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.dishAddShow=false;
                            })
                        }else if (this.title=="修改菜品信息"){
                            axios.put("/dishs",this.formData_ShoppingCart).then((res)=>{
                                if (res.data.code){
                                    console.log("dddd")
                                    this.$message.success(res.data.msg);
                                    console.log("提交后响应得内容：")
                                    console.log(res.data)
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.dishAddShow=false;
                            })
                        }
                    }else{

                    }
                })

            },

            getImage (image) {
                this.imageUrl1= `/photos/download?name=${image}`
            },

        }
    })
</script>
</body>
</html>
